<div class="bt-search">
    <div class="bt-box">
        <button nz-button nzType="primary" (click)="showModal()">新增类型</button>
        <!-- <button nz-button nzType="default" nzDanger (click)="onAllDel()">批量删除</button> -->
    </div>
    <!-- 其他功能按钮 -->
    <div class="bt-list">
        <a class="refresh" nzTooltipTitle="刷新" nzTooltipPlacement="top" nz-tooltip><i nz-icon nzType="sync"
                nzTheme="outline"></i></a>
        <!-- <a class="export" nzTooltipTitle="导出" nzTooltipPlacement="top" nz-tooltip><i nz-icon nzType="download"
                nzTheme="outline"></i></a> -->
    </div>
    <!-- 搜索 -->
    <div class="search-box">
        <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
            <input type="text" nz-input placeholder="请输入类型名称" [(ngModel)]="queryForm.name" />
        </nz-input-group>
        <ng-template #suffixIconButton>
            <button nz-button nzType="primary" nzSearch (click)="query()"><i nz-icon nzType="search"></i></button>
        </ng-template>
    </div>
</div>
<main>

    <nz-table #rowSelectionTable nzShowSizeChanger [nzData]="listOfData?.records" [nzShowPagination]="false" nzBordered>
        <thead>
            <tr>
                <!-- <th [(nzChecked)]="checked" (nzCheckedChange)="onAllChecked($event)"></th> -->
                <th nzAlign="center">ID</th>
                <th nzAlign="center">类型名称</th>
                <th nzAlign="center">规格数量</th>
                <th nzAlign="center">参数数量</th>
                <th nzAlign="center">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of rowSelectionTable.data">
                <!-- <td nzAlign="center" [nzChecked]="data.Checked" (nzCheckedChange)="onItemChecked(data.id, $event)">
                </td> -->
                <td nzAlign="center">{{ data.id }}</td>
                <td nzAlign="center">{{ data.name }}</td>
                <td nzAlign="center">
                    <a nz-button nz-button-tdlink nzType="link"
                        [routerLink]="['../goodsList', { attrTypeId: data.id,type:0 }]">{{ data.attrCount }}</a>
                </td>
                <td nzAlign="center">
                    <a nz-button nz-button-tdlink nzType="link"
                        [routerLink]="['../goodsList', { attrTypeId: data.id,type:1 }]">{{ data.parmaCount }}</a>
                </td>
                <td nzAlign="center">
                    <a nz-button nz-button-tdlink nzType="link" (click)="showModal(data.id)">编辑</a>
                    <a nz-button nz-button-tdlink nzType="link" nzDanger nz-popconfirm nzPopconfirmTitle="确认删除吗?"
                        [nzIcon]="iconTpl" (nzOnConfirm)="confirm(data.id)">删除</a>
                    <ng-template #iconTpl>
                        <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                    </ng-template>
                </td>
            </tr>
        </tbody>
    </nz-table>
    <div class="pagination-box">
        <span>共 <strong>0</strong> 条</span>
        <div class="pagination-template">
            <ng-template #totalTemplate let-total> 共有 {{ total }} 条 </ng-template>
            <nz-pagination [nzPageSizeOptions]="[10, 20, 50, 100]"nzShowSizeChanger nzShowQuickJumper [nzPageIndex]="1" [nzTotal]="listOfData?.total"
                [nzShowTotal]="totalTemplate" [nzPageSize]="listOfData?.size"
                (nzPageIndexChange)="onPageIndexChange($event)" (nzPageSizeChange)="onPageSizeChange($event)">
            </nz-pagination>
        </div>
    </div>
</main>
<nz-modal [(nzVisible)]="isVisible" nzTitle="请输入类型名称" (nzOnCancel)="handleCancel()" [nzFooter]="null">
    <ng-container *nzModalContent>
        <form nz-form [formGroup]="modalForm" (ngSubmit)="submitForm()">
            <nz-form-item>
                <nz-form-label [nzSpan]="4">名称</nz-form-label>
                <nz-form-control [nzSpan]="14">
                    <input nz-input formControlName="name" placeholder="" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control [nzSpan]="8" [nzOffset]="4">
                    <button nz-button nzType="primary" [nzLoading]="modalLoading">保存</button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </ng-container>
</nz-modal>